<template>
  <view class="cart">
    <!-- 收货地址 -->
    <view class="revice_address_row">
      <!-- 当收货地址 不存在 按钮显示  对象 空对象 bool类型也是true  -->
      <view class="address_btn" v-if="!address.userName"
        @click="handleChooseAddress">
        选择收货地址
      </view>
      <!-- 当收货地址 存在 详细信息就显示 -->
      <view v-else class="user_info_row" @click="handleChooseAddress">
        <view class="user_info">
          <view>{{ address.userName }}</view>
          <view>{{ address.allName + address.detailInfo }}</view>
        </view>
        <view class="user_phone">{{ address.telNumber }}</view>
      </view>
    </view>

    <!-- 购物车内容 -->
    <view class="cart_content">
      <view class="cart_title">购物车</view>
      <view class="cart_main">
        <!-- 当cart数组 长度不为0 显示 商品信息 -->
        <block v-if="cart.length !== 0">
          <view class="cart_item" v-for="item in cart" :key="item.goods_id">
            <!-- 复选框 -->
            <view class="cart_chk_wrap">
              <checkbox-group @change="handeItemChange(item.goods_id)">
                <checkbox :checked="item.checked"></checkbox>
              </checkbox-group>
            </view>
            <!-- 商品图片 -->
            <navigator class="cart_img_wrap">
              <image mode="widthFix" :src="item.goods_small_logo"></image>
            </navigator>
            <!-- 商品信息 -->
            <view class="cart_info_wrap">
              <view class="goods_name">{{ item.goods_name }}</view>
              <view class="goods_price_wrap">
                <view class="goods_price">￥{{ item.goods_price }}</view>
                <view class="cart_num_tool">
                  <view @click="handleItemNumEdit(item.goods_id, -1)"
                    class="num_edit">-</view>
                  <view class="goods_num">{{ item.num }}</view>
                  <view @click="handleItemNumEdit(item.goods_id, 1)"
                    class="num_edit">+</view>
                </view>
              </view>
            </view>
          </view>
        </block>
        <block v-else>
          <image mode="widthFix"
            src="http://hbimg.b0.upaiyun.com/e1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658">
          </image>
        </block>
      </view>
    </view>

    <!-- 底部工具栏 -->
    <view class="footer_tool">
      <!-- 全选 -->
      <view class="all_chk_wrap">
        <checkbox-group @change="handleItemAllCheck">
          <checkbox :checked="allChecked">全选</checkbox>
        </checkbox-group>
      </view>
      <!-- 总价格 -->
      <view class="total_price_wrap">
        <view class="total_price">
          合计: <text class="total_price_text">￥{{ totalPrice }}</text>
        </view>
        <view>包含运费</view>
      </view>
      <!-- 结算 -->
      <view class="order_pay_wrap" @click="handlePay">
        结算({{ totalNum }})
      </view>
    </view>
  </view>
</template>

<script>
  import {
    showModal,
    showToast
  } from "../../../utils/util"
  import {
    getStorage,
    setStorage
  } from "../../../api/Storage"
  export default {
    data() {
      return {
        address: {},
        cart: [],
        allChecked: false,
        totalPrice: 0,
        totalNum: 0,
      }
    },
    onLoad() {
      // 1 获取缓存中的收货地址信息
      const addressList = getStorage("addressList") || []
      const addressFilter = addressList.filter((v) => v.type === 1)
      this.address = addressFilter.length ? addressFilter[0] : {}
    },
    onShow() {
      uni.$on("addressBack", (res) => {
        this.address = JSON.parse(decodeURIComponent(res))
        console.log(this.address)
        // 清除监听
        uni.$off("addressBack")
      })
      // 1 获取缓存中的购物车数据
      const cart = getStorage("cart") || []
      this.cart = cart
      this.setCart(cart)
    },
    methods: {
      // 点击 收货地址
      async handleChooseAddress() {
        uni.navigateTo({
          url: "/pages/address/address",
          animationType: "pop-in",
          animationDuration: 300,
        })
      },
      // 商品的选中
      handeItemChange(goods_id) {
        let {
          cart
        } = this
        let index = cart.findIndex((v) => v.goods_id === goods_id)
        cart[index].checked = !cart[index].checked
        this.setCart(cart)
      },
      // 设置购物车状态同时 重新计算 底部工具栏的数据 全选 总价格 购买的数量
      setCart(cart) {
        let allChecked = true
        // 1 总价格 总数量
        let totalPrice = 0
        let totalNum = 0
        cart.forEach((v) => {
          if (v.checked) {
            totalPrice += v.num * v.goods_price
            totalNum += v.num
          } else {
            allChecked = false
          }
        })
        // 判断数组是否为空
        allChecked = cart.length != 0 ? allChecked : false
        this.cart = cart
        this.totalPrice = totalPrice
        this.totalNum = totalNum
        this.allChecked = allChecked
        setStorage("cart", cart)
      },
      // 商品全选功能
      handleItemAllCheck() {
        // 1 获取data中的数据
        let {
          cart,
          allChecked
        } = this
        // 2 修改值
        allChecked = !allChecked
        // 3 循环修改cart数组 中的商品选中状态
        cart.forEach((v) => (v.checked = allChecked))
        // 4 把修改后的值 填充回data或者缓存中
        this.setCart(cart)
      },
      // 商品数量的编辑功能
      async handleItemNumEdit(id, operation) {
        let {
          cart
        } = this
        const index = cart.findIndex((v) => v.goods_id === id)
        if (cart[index].num === 1 && operation === -1) {
          const res = await showModal({
            title: "您是否要删除？"
          })
          if (res) {
            cart.splice(index, 1)
            this.setCart(cart)
          }
        } else {
          // 4  进行修改数量
          cart[index].num += operation
          // 5 设置回缓存和data中
          this.setCart(cart)
        }
      },
      // 点击 结算
      async handlePay() {
        // 1 判断收货地址
        const {
          address,
          totalNum
        } = this
        if (!address.userName) {
          showToast({
            title: "您还没有选择收货地址"
          })
          return
        }
        // 2 判断用户有没有选购商品
        if (totalNum === 0) {
          showToast({
            title: "您还没有选购商品"
          })
          return
        }
        // 3 跳转到 支付页面
        wx.navigateTo({
          url: "/pages/pay/pay",
        })
      },
    },
  }
</script>

<style lang="scss">
  page {
    padding-bottom: 90upx;
  }

  .cart {
    .revice_address_row {
      .address_btn {
        width: 100%;
        height: 88upx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .user_info_row {
        display: flex;
        padding: 20upx;

        .user_info {
          width: 450upx;

          view {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

        }

        .user_phone {
          flex: 1;
          text-align: right;
        }
      }
    }

    .cart_content {
      .cart_title {
        padding: 20upx;
        font-size: 36upx;
        color: #eb4450;
        border-top: 1upx solid currentColor;
        border-bottom: 1upx solid currentColor;
      }

      .cart_main {
        .cart_item {
          display: flex;
          height: 202upx;
          padding: 10upx 15px 10px 10px;
          border-bottom: 1upx solid #ccc;

          .cart_chk_wrap {
            width: 48upx;
            margin: 0 10upx;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .cart_img_wrap {
            flex: 2;
            display: flex;
            justify-content: center;
            align-items: center;

            image {
              width: 80%;
            }
          }

          .cart_info_wrap {
            flex: 4;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .goods_name {
              display: -webkit-box;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              color: #666;
            }

            .goods_price_wrap {
              display: flex;
              justify-content: space-between;

              .goods_price {
                color: #eb4450;
                font-size: 34upx;
              }

              .cart_num_tool {
                display: flex;

                .num_edit {
                  width: 55upx;
                  height: 55upx;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border: 1upx solid #ccc;
                }

                .goods_num {
                  width: 55upx;
                  height: 55upx;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }

    .footer_tool {
      position: fixed;
      bottom: 0;
      /* #ifdef H5 */
      bottom: 98upx;
      /* #endif */
      left: 0;
      width: 100%;
      height: 90upx;
      background-color: #fff;
      display: flex;
      border-top: 1upx solid #ccc;
      padding-left: 10upx;

      .all_chk_wrap {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .total_price_wrap {
        flex: 5;
        padding-right: 15upx;
        text-align: right;

        .total_price {
          .total_price_text {
            color: #eb4450;
            font-size: 34upx;
            font-weight: 600;
          }
        }
      }

      .order_pay_wrap {
        flex: 3;
        background-color: #eb4450;
        color: #fff;
        font-size: 32upx;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
